<template>
	<view class="container">
		<hr class="chr"/>
		<div class = "topbill">
		  <uni-row>
			<uni-col :span="6">
				<picker @change="bindPickerChange" range-key="version" :value="index"  :range="datas">
				<view><text class="itemth">版本:</text><text class="itmemain">{{quality.version}}</text></view>
				</picker>
			</uni-col>
			<uni-col :span="6">
				<view style="justify-content: center;"><text class="itemth">方案名称:</text><text class="itmemain" style="color: #2C405A;">{{quality.projectName}}</text></view>
			</uni-col>
			<uni-col :span="6">
				<view style="justify-content: center;" @click="showDrawer"><text class="itemth">单号:</text><text class="itmemain">{{quality.ccode}}</text></view>
			</uni-col>
		  </uni-row>
			  <uni-drawer mode="right" :width="350" ref="drawer">
				  <uni-list  >
				      <uni-list-item title="来料单号" :rightText="quality.ccode"></uni-list-item>
					  <uni-list-item title="部门名称" :rightText="quality.cdepname"></uni-list-item>
					  <uni-list-item title="产品编码" :rightText="quality.cinvcode"></uni-list-item>
					  <uni-list-item title="产品名称" :rightText="quality.cinvname"></uni-list-item>
					  <uni-list-item title="产品规格" :rightText="quality.cinvstd"></uni-list-item>
					  <uni-list-item title="质检等级" :rightText="quality.level"></uni-list-item>
					  <uni-list-item title="数量" :rightText="quality.qty"></uni-list-item>
					  <uni-list-item title="备注" :rightText="quality.remark"></uni-list-item>
				  </uni-list>
			  </uni-drawer>
		</div>
		<view style="overflow-x: auto; min-height: 250upx;background-color: #f9f9f9;padding: 5upx;">
			<table border style="border-collapse: separate;overflow: hidden;width:1000upx">
			    <!-- 表头行 -->
			    <tr>
					<th align="center" width="20"></th>
			        <th align="center" width="150">测试项目</th>
			        <th align="center" width="150">测试指标</th>
			        <th align="center" width="80">规格</th>
			        <th align="center" width="30">等级</th>
					<th align="center" width="80">NO.1</th>
					<th align="center" width="80">NO.2</th>
					<th align="center" width="80">NO.3</th>
					<th align="center" width="80">NO.4</th>
					<th align="center" width="80">NO.5</th>
					<th align="center" width="40">系统</th>
					<th align="center" width="80">人工</th>
					<th align="center" width="350">备注</th>
			    </tr>          
			    <!-- 表格数据行 -->
			    <tr v-for="item,index in quality.entitys" v-bind:key="index">
			        <td align="center">{{index}}</td>
			        <td align="center">{{item.planName}}</td>
			        <td align="center">{{item.quotaName}}</td>
			        <td align="center">{{item.specs}}</td>
			        <td align="center">{{item.grade}}</td>
			        <td align="center" :class="item.qc<1?'cdisable':''">
						<input v-if="item.type === '数值'" type="number" v-model="item.no1" :disabled="item.qc<1" @blur="check"/>
						<checkbox v-else checked="item.no1=='符合'" @click="selbox(index,'no1')" :disabled="item.qc<1">
							{{item.no1}}
						</checkbox>
					</td>
					<td align="center" :class="item.qc<2?'cdisable':''">
						<input v-if="item.type === '数值'" type="number" v-model="item.no2" :disabled="item.qc<2" @blur="check"/>
						<checkbox v-else checked="item.no2=='符合'" @click="selbox(index,'no2')" :disabled="item.qc<2">
						{{item.no2}}
						</checkbox>
					</td>
					<td align="center" :class="item.qc<3?'cdisable':''">
						<input v-if="item.type === '数值'" type="number" v-model="item.no3" :disabled="item.qc<3" @blur="check"/>
						<checkbox v-else checked="item.no3=='符合'" @click="selbox(index,'no3')" :disabled="item.qc<3">
						{{item.no3}}
						</checkbox>
					</td>
					<td align="center" :class="item.qc<4?'cdisable':''">
						<input v-if="item.type === '数值'" type="number" v-model="item.no4" :disabled="item.qc<4" @blur="check"/>
						<checkbox v-else checked="item.no4=='符合'" @click="selbox(index,'no4')" :disabled="item.qc<4">
						{{item.no4}}
						</checkbox>
					</td>
					<td align="center" :class="item.qc<5?'cdisable':''">
						<input v-if="item.type === '数值'" type="number" v-model="item.no5" :disabled="item.qc<5" @blur="check"/>
						<checkbox v-else checked="item.no5=='符合'" @click="selbox(index,'no5')" :disabled="item.qc<5">
						{{item.no5}}
						</checkbox>
					</td>
			        <td align="center">{{item.judge}}</td>
			        <td align="center">
						<checkbox checked="item.result=='合格'" @click="selresult(index)" >
						{{item.result}}
						</checkbox>
					</td>
					<td align="center">
						<uni-easyinput v-model="item.remark"></uni-easyinput>
					</td>
			    </tr>
			</table>
		</view>
		
		<uni-card title="总评">
			<view style="width: 280upx;margin-bottom: 10upx;">
				<uni-file-picker 
					auto-upload
				    v-model="imageValue" 
				    fileMediatype="image" 
				    mode="grid" 
					:limit="6"
				    @select="select" 
				    @progress="progress" 
				    @success="success" 
				    @fail="fail" 
					:auto-upload="true"
				/>
			</view>
			<view style="display: flex;flex-direction: row;justify-content: space-between;">
				<view>
					<radio-group @change="radioChange">
						<radio value="合格" :checked="quality.measurement === '合格'">合格</radio>
						<radio value="不合格" >不合格</radio>
					</radio-group>
				</view>
				<view>
					<button type="primary" size="mini" @click="saveEdit">保存</button>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			if(option.id){
				this.getBill(option.id)
			}
		},
		created() {
		},
		data() {
			return {
				imageValue:[],
				form: {},
				open:false,
				index:0,
				datas:[],
				quality:{}
			}
		},
		methods: {
			findAll(){
				this.$http.get(
					"project/getByCInvCode",
					{
						cinvcode:this.form.cInvCode
					}
				).then(res=>{
					this.datas = res.data.data.data
					if(this.datas.length > 0){
						this.setQuality(this.datas[this.index])
					}else{
						uni.showToast({
							icon:'error',
						    title: '此产品未有质检方案',
						    duration: 1000
						});
					}
					
				})
			},
			getBill(id){
				this.$http.get(
					"u8QcProduce/get",
					{
						id:id
					}
				).then(res=>{
					this.form = res.data.data.data
					this.findAll();
				})
			},
			bindPickerChange(){
				this.setQuality(this.datas[this.index])
			},
			selVersion(e) {
			  for (const item of this.datas) {
				if (item.id === e) {
				  this.setQuality(item)
				  break
				}
			  }
			},
			setQuality(data) {
			  const target = {}
			  target.ccode = this.form.cCode
			  target.autoid = this.form.Autoid
			  target.cdepname = this.form.cDepName
			  target.cdepcode = this.form.cDepCode
			  target.qty = this.form.iQuantity +''
			  target.mocode = this.form.MoCode
			  target.level = data.level
			  target.grade = data.grade
			  target.cinvcode = data.cinvcode
			  target.cinvname = data.cinvname
			  target.cinvstd = data.cinvstd
			  target.projectId = data.id
			  target.projectDescribe = data.describe
			  target.projectName = data.name
			  target.version = data.version
			  target.remark = data.remark
			  target.measurement = '合格'
			  target.entitys = []
			  for (const item of data.entitys) {
				const ent = { quotaId: item.quota.id, quotaName: item.quota.name, type: item.type,
				  planId: item.quota.basePlan.id, planName: item.quota.basePlan.name, specs: item.specs,
				  judge: '合格', result: '合格', grade: item.grade,
				  strVal: item.strVal, miniVal: item.miniVal, stanVal: item.stanVal, maxVal: item.maxVal }
				target.entitys.push(ent)
			  }
			  this.quality = target
			  this.setGrade()
			},
			setGrade() {
				for (let i = 0; i < this.quality.entitys.length; i++) {
					const item = this.quality.entitys[i]	
					this.$http.get(
						"qmilcode/get",
						{ level: this.quality.level, qty: 100, grade: item.grade }
					).then(res=>{
						item.qc = res.data.data.data.qc
						item.ac = res.data.data.data.ac
						item.re = res.data.data.data.re
						if(item.type === '字符'){
							if(item.qc > 0 ){
								item.no1 = '符合'
							}
							if(item.qc > 1 ){
								item.no2 = '符合'
							}
							if(item.qc > 2 ){
								item.no3 = '符合'
							}
							if(item.qc > 3 ){
								item.no4 = '符合'
							}
							if(item.qc > 4 ){
								item.no5 = '符合'
							}
						}
						this.quality.entitys[i] = item
						this.quality.entitys = JSON.parse(JSON.stringify(this.quality.entitys))
					})

				}
			},
			check() {
			      for (const row of this.quality.entitys) {
			        row.judge = '合格'
			        if (row.type === '字符') {
			          if (row.qc >= 1 && row.no1 && row.no1 !== '符合') {
			            row.result = row.judge = '不合格'
			            continue
			          }
			          if (row.qc >= 2 && row.no2 && row.no2 !== '符合') {
			            row.result = row.judge = '不合格'
			            continue
			          }
			          if (row.qc >= 3 && row.no3 && row.no3 !== '符合') {
			            row.result = row.judge = '不合格'
			            continue
			          }
			          if (row.qc >= 4 && row.no4 && row.no4 !== '符合') {
			            row.result = row.judge = '不合格'
			            continue
			          }
			          if (row.qc >= 5 && row.no5 && row.no5 !== '符合') {
			            row.result = row.judge = '不合格'
			            continue
			          }
			        } else if (row.type === '数值') {
			          if (row.qc >= 1 && row.no1 && (row.miniVal > row.no1 || row.no1 > row.maxVal)) {
			            row.result = row.judge = '不合格'
			            continue
			          }
			          if (row.qc >= 2 && row.no2 && (row.miniVal > row.no2 || row.no2 > row.maxVal)) {
			            row.result = row.judge = '不合格'
			            continue
			          }
			          if (row.qc >= 3 && row.no3 && (row.miniVal > row.no3 || row.no3 > row.maxVal)) {
			            row.result = row.judge = '不合格'
			            continue
			          }
			          if (row.qc >= 4 && row.no4 && (row.miniVal > row.no4 || row.no4 > row.maxVal)) {
			            row.result = row.judge = '不合格'
			            continue
			          }
			          if (row.qc >= 5 && row.no5 && (row.miniVa > row.no5 || row.no5 > row.maxVal)) {
			            row.result = row.judge = '不合格'
			            continue
			          }
			        }
			        row.result = '合格'
			      }
			      this.quality = JSON.parse(JSON.stringify(this.quality))
			    },
			radioChange(e){
				this.quality.measurement = e.detail.value
			},
			showDrawer(){
				this.$refs.drawer.open()
			},
			selbox(index,type){
				this.quality.entitys[index][type] =  this.quality.entitys[index][type] === '符合' ? '不符合' : '符合' 
				//this.quality.entitys = JSON.parse(JSON.stringify(this.quality.entitys))
				this.check()
			},
			selresult(index){
				this.quality.entitys[index].result =  this.quality.entitys[index].result === '合格' ? '不合格' : '合格'
				this.quality.entitys = JSON.parse(JSON.stringify(this.quality.entitys))
				//this.check()
			},
			saveEdit() {
			  if(!this.quality.version){
				 uni.showToast({
				 	icon:'error',
				     title: '请选择质检方案',
				     duration: 1000
				 });
				 return;
			  }
			  
			  this.$http.post(
			  	"quality/save",
			  	this.quality
			  ).then(res=>{
				if(res.data.code === 200){
					uni.showToast({
					    title: res.data.message,
					    duration: 2000
					});
					setTimeout(()=>{
						uni.navigateBack()
					},2000)
				}else{
					uni.showToast({
						icon:'error',
					    title: res.data.message,
					    duration: 2000
					});
				}
			  })
			},
			  // 获取上传状态
			select(e){
				this.$http.upload(e.tempFilePaths[0]).then(res =>{
					console.log(res.data)
				})
			},
			// 获取上传进度
			progress(e){
				console.log('上传进度：',e)
			},

			// 上传成功
			success(e){
				console.log('上传成功')
			},

			// 上传失败
			fail(e){
				console.log('上传失败：',e)
			}
		}
	}
</script>

<style>
	.container {
		font-size: 10px;
		height: 100vh;
		background-color: #f0faff;
	}
	.unigriditem{
		text-align:center;
		text-justify: auto;
		margin: auto auto;
	}
	.itemth{
		padding: 10rpx;
		font-size: 10rpx;
	}
	.itmemain{
		font-size: 15rpx;
		color: #007AFF;
	}
	.noselect{
		width: 100%;
		height: 30rpx;
		border-radius: 5rpx;
		border-width: 1rpx;
		border-color: #dedede;
	}
	.topbill{
		padding: 5upx 0upx;
	}
	.chr{
		height:1upx;
		border:none;
		border-top:1upx solid #cbebff;
	}
	.cdisable{
		background-color: #d5d5d5;
		visibility:hidden;
		
	}
</style>
